<template>
<div  class="layout">
<div  class="center_label">

  
    <div class="outer_label">
     
      <img class="inner_label login_logo" src="../../../static/images/logo.gif">
    </div>
    <div class="login_form">
       <el-input v-model="input" placeholder="用户名"></el-input>
       <el-input class="input_password" v-model="password" type="password" placeholder="密码"></el-input>
      <!-- <el-button class="login_btn" @click.native="login" type="primary" round :loading="isBtnLoading">登录</el-button> -->
      <div class="login_btn">
        <el-button @click="handleSubmit" class="btn">登录</el-button>
      </div>
      <div style="margin-top: 20px">
      <a href="#"> <span style="float: right;color: #A9A9AB">忘记密码？</span> </a>
       </div>
     </div>
   </div>
  </div>
</template>
<script>
export default {
  name: 'Login',
  data(){
    return {
      password:'',
      input:'',
  }
  },
  methods:{
    handleSubmit(){
      if(this.password=='123'&&this.input=='沈国荣'){
        this.$router.push( {name:'Home',params:{username:this.input}})
        
      }else{
        alert("账号或者密码错误")
      }
      

    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.layout{

overflow:hidden;
height: 100%;
width: 100%;
position: absolute;
text-align: center;

background: url("../../../static/images/logos.jpg") no-repeat;
 background-size:cover;
}
.center_label{
  border-radius: 5px;
 margin-top 10%;
  margin-left 35%;
// margin:auto;
text-align: center;
background: white;
height: 55%;
width: 30%;
}
.outer_label{
 
  
  
}
 .title{
     font-size: 25px;
     color: red;
   }

.login_form {

    margin-top:30px;
    padding-left: 10%;
    padding-right: 10%;
  }
  .input_password {
     margin-top: 30px;
     margin-bottom: 30px
  }
  .login_logo {
    border-radius: 5px;
    margin-top: 30px;
    height: 70px;
    width: 80px;
    
  }
  .login_btn {
   text-align: center;
  }
  .btn{
    width: 80%
  }
</style>
